<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片区 -->
    <el-card shadow="never" style='padding-left=0;'>
      <!-- 添加试题按钮区 -->
      <div class='addBtnBox'>
        <span>{{$t('table.notice')}}</span>
        <el-button icon="el-icon-edit" type="success" size='small' @click='$router.push("new")'>{{$t('table.questionNew')}}</el-button>
      </div>
    <!-- /添加试题按钮区 -->
      <!-- layout布局 -->
      <el-form :model="queryForm" ref="queryFormRef" class='filter-container' label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6"> 
            <el-form-item :label="$t('route.subject')">
              <el-select   class='choiceInput' v-model='queryForm.subjectID' @change='getMenus'>
                <el-option v-for='(item, i) in subjects' :label="item.label" :value='item.value' :key='i'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('route.secondDir')">
              <el-select   class='choiceInput' v-model='queryForm.catalogID'>
                <el-option v-for='(item, i) in subjectMenu' :label="item.label" :value='item.value' :key='i'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('route.tag')">
              <el-select   class='choiceInput' v-model='queryForm.tags'>
                <el-option v-for='(item, i) in MenuTags' label="item.label" :value='item.value' :key='i'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('route.keyWord')" >
              <el-input class='choiceInput' v-model.trim="queryForm.keyword" @change='getUsers'></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"> 
            <el-form-item :label="$t('route.type')" >
              <el-select   class='choiceInput' v-model="queryForm.questionType">
                <el-option label="区域一" value='1' ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('route.difficulty')">
              <el-select   class='choiceInput' v-model='queryForm.difficulty'>
                <el-option v-for='(item, i) in difficulty' :label='item.label' :value='item.label' :key='i'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('route.direction')">
              <el-select   class='choiceInput' v-model='queryForm.direction'>
                <el-option v-for='(item, i) in direction' :label="item" :value='i' :key='i'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('route.creator')">
              <el-select   class='choiceInput' v-model="queryForm.creatorID">
                <el-option v-for='item in userList' :label="item.username" :value='item.id' :key='item.id'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"> 
            <el-form-item :label="$t('route.remarks')">
              <el-input class='choiceInput' v-model.trim="queryForm.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('route.company')">
              <el-input class='choiceInput' v-model.trim='queryForm.shortName'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('route.city')">
                <el-row class='choiceInput'>
                  <el-col :span='12'
                  style='padding-right: 5px;'
                  >
                    <el-select
                      v-model='queryForm.province'
                      @change='choiceCity'
                    >
                      <el-option
                        v-for="(item, i) in provinces"
                        :label="item"
                        :value="item"
                        :key="i"
                      >
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col
                    :span='12'
                    style='padding-left: 5px;'
                  >
                    <el-select
                    v-model='queryForm.city'>
                      <el-option
                        v-for="(item, i) in areas"
                        :label="item"
                        value="item"
                        :key="i"
                      >
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="6" class='opationBox' style='padding-right: 0;'>
              <el-button size='small' @click='resetForm'>{{$t('route.clear')}}</el-button>
              <el-button type="primary" size='small' @click='getChoiceQuestionsList'>{{$t('navbar.search')}}</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- /layout布局 -->
      <!-- 标签页 -->
      <el-tabs v-model="tabActive" type="card" @tab-click="getChoiceQuestionsList">
        <el-alert
          :title="' 数据一共'+ total +'条'"
          show-icon
          type="info"
          :closable="false"
        >
        </el-alert>
        <el-tab-pane :label="$t('table.all')" name="3">
          <show-question
          @chkQuestions='getChoiceQuestionsList'
          @changePublishState='changePublishState'
          @deleteQuest='deleteQuestion'
          :list='choiceQuestionsList'
          ></show-question>
        </el-tab-pane>
        <el-tab-pane :label="$t('table.pending')" name="0">
          <show-question
          @chkQuestions='getChoiceQuestionsList'
          @changePublishState='changePublishState'
          @deleteQuest='deleteQuestion'
          :list='choiceQuestionsList'
          ></show-question>
        </el-tab-pane>
        <el-tab-pane :label="$t('table.Reviewed')" name="1">
          <show-question
          :list='choiceQuestionsList'
          @changePublishState='changePublishState'
          @deleteQuest='deleteQuestion'
          ></show-question>
        </el-tab-pane>
        <el-tab-pane :label="$t('table.rejected')" name="2">
          <show-question
          :list='choiceQuestionsList'
          @changePublishState='changePublishState'
          @deleteQuest='deleteQuestion'
          ></show-question>
        </el-tab-pane>
      </el-tabs>
      <!-- /标签页 -->
      <!-- 分页结构 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="queryForm.page"
          background
          :page-sizes="[1, 2, 5, 10]"
          :page-size="queryForm.pagesize"
          layout="prev, pager, next,sizes, jumper"
          :total="total"
        >
        </el-pagination>
        <!-- /分页结构 -->
      </el-card>
    </div>
  </div>
</template>

<script>
import ShowQuestion from '../components/show-question'
import { simple } from '@/api/hmmm/subjects'
import { simple as loadMenus } from '@/api/hmmm/directorys'
import { simple as loadTags } from '@/api/hmmm/tags'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { simple as createdMan } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { choice, choicePublish, remove } from '@/api/hmmm/questions'
export default {
  data() {
    return {
      queryForm: {
        page: 1,
        pagesize: 5,
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: '',
        difficulty: '',
        direction: '',
        creatorID: null,
        remarks: '',
        shortName: '',
        province: '',
        city: '',
        chkState: null
      },
      subjects: [],
      subjectMenu: [],
      handler: null,
      MenuTags: [],
      userList: [],
      provinces: [],
      areas: [],
      tabActive: '3',
      choiceQuestionsList: [],
      total: 0
    }
  },
  components: {
    ShowQuestion
  },
  computed: {
    difficulty() {
      return difficulty
    },
    questionType() {
      return questionType
    },
    direction() {
      return direction
    }
  },
  watch: {
    tabActive(val) {
      if (val === '3') {
        this.queryForm.chkState = null
      } else {
        this.queryForm.chkState = val
      }
    }
  },
  created() {
    // 初始化获取学科列表数据
    this.getSubjectList()
    this.getChoiceQuestionsList()
    console.log(this.$t('route'))
  },
  async mounted() {
    this.provinces = await provinces()
  },
  methods: {
    // 获取学科数据的函数
    async getSubjectList() {
      try {
        const { data } = await simple()
        this.subjects.push(...data)
      } catch (err) {
        this.$message.error('获取学科信息失败')
      }
    },
    // 获取二级目录
    async getMenus() {
      try {
        const { data } = await loadMenus({
          subjectID: this.queryForm.subjectID
        })
        this.subjectMenu = data
        // 获取目录对应标签
        const res = await loadTags({ subjectID: this.queryForm.subjectID })
        this.MenuTags = res.data
      } catch (err) {
        this.$message.error('获取目录失败')
      }
    },
    // 获取用户简单信息
    async getUsers() {
      try {
        // 录入人
        const { data } = await createdMan()
        this.userList = data
      } catch (err) {
        this.$message.error('获取用户信息失败')
      }
    },
    // 选择城市触发的事件
    async choiceCity() {
      try {
        // 获取城市,对应的地区
        this.areas = await citys(this.queryForm.city)
      } catch (err) {
        this.$message.error('获取地区失败')
      }
    },
    // 获取精选题库列表
    async getChoiceQuestionsList() {
      if (this.queryForm.chkState === '3') {
        this.queryForm.chkState = null
      }
      const { data } = await choice(this.queryForm)
      this.choiceQuestionsList = data.items
      this.total = data.counts
      if (this.queryForm.chkState === null) {
        this.queryForm.chkState = '3'
      }
    },
    // 清除搜索内容
    resetForm() {
      this.$refs.queryFormRef.$el.reset()
      this.queryForm.subjectID = null
      this.queryForm.keyword = ''
      this.getChoiceQuestionsList()
      // this.$refs.queryFormRef.resetFields()
    },
    // 分页
    handleSizeChange(val) {
      this.queryForm.pagesize = val
      this.getChoiceQuestionsList()
    },
    // 分页
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.getChoiceQuestionsList()
    },
    // 改变上下架状态
    async changePublishState(id, state) {
      // console.log(id, state)
      const i = this.choiceQuestionsList.findIndex(item => {
        return item.id === id
      })
      this.choiceQuestionsList[i].publishState = state
      // console.log(this.choiceQuestionsList[i].publishState)
      // 精选题库上下架
      const res = await choicePublish(this.choiceQuestionsList[i])
      if (res.status === 200) {
        this.$message.success('操作成功')
        this.getChoiceQuestionsList()
        // console.log(this.choiceQuestionsList)
      }
    },
    // 删除题库
    async deleteQuestion(question) {
      try {
        await remove(question)
        this.getChoiceQuestionsList()
        this.$message.success('删除题库成功')
      } catch (err) {
        this.$message.error('删除题库失败, 请重试')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.dashboard-container {
  .addBtnBox {
    display: flex;
    justify-content: space-between;
    > span {
      font-size: 12px;
      color: pink;
    }
  }
  .opationBox {
    text-align: right;
  }
  .filter-container {
    margin-top: 20px;
    ::v-deep .el-col-6 {
      .el-form-item {
        width: 100%;
        .el-form-item__content {
          width: 100%;
          .choiceInput {
            width: 76%;
            height: 32px;
          }
        }
      }
    }
    .area {
      display: inline-block;
    }
  }
  .el-pagination {
    float: right;
    margin: 20px 0;
  }
}
</style>
